<template>
  <view class="form-container">
    <Sign>1-1.答卷人基本信息</Sign>
    <u-form :model="form" :rules="rules" ref="form">
      <u-form-item prop="user_age" label="姓名：" borderBottom label-width="60">
        <u-input type="text" v-model="form.name" border="none" placeholder="姓名"></u-input>
      </u-form-item>
      <u-form-item prop="user_age" label="年龄：" borderBottom label-width="60">
        <u-input type="number" v-model="form.user_age" border="none" placeholder="年龄"></u-input>
      </u-form-item>
      <u-form-item prop="user_age" label="身份证号：" borderBottom label-width="90">
        <u-input type="idcard" v-model="form.idCard" border="none" placeholder="身份证号"></u-input>
      </u-form-item>
      <u-form-item prop="user_age" label="电话号码：" borderBottom label-width="90">
        <u-input type="number" v-model="form.phoneNumber" border="none" placeholder="电话号码"></u-input>
      </u-form-item>
      <u-form-item prop="user_sex" label="性别：" borderBottom label-width="60">
        <u-radio-group v-model="form.user_sex">
          <u-radio
            :customStyle="{ marginRight: '40rpx' }"
            v-for="(item, index) in genderList"
            :key="index"
            :label="item.name"
            :name="item.name"
          ></u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item prop="user_nation" label="民族：" borderBottom label-width="60">
        <u-input v-model="form.user_nation" border="none"></u-input>
      </u-form-item>
      <u-form-item prop="total_people_num" label="家庭人口：" borderBottom label-width="90">
        <u-input
          type="number"
          v-model="form.total_people_num"
          border="none"
          @blur="changeFamilySize"
          placeholder="最多为10"
        ></u-input>
      </u-form-item>
      <u-form-item prop="education_level" borderBottom>
        <view class="title">受教育程度：</view>
        <u-radio-group v-model="form.education_level" placement="column">
          <u-radio
            :customStyle="{ marginBottom: '40rpx' }"
            v-for="(item, index) in educationList"
            :key="index"
            :label="item.name"
            :name="item.name"
          ></u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item prop="if_marriage" borderBottom>
        <view class="title">婚姻状况：</view>
        <u-radio-group v-model="form.if_marriage" placement="column">
          <u-radio
            :customStyle="{ marginBottom: '40rpx' }"
            v-for="(item, index) in marriageList"
            :key="index"
            :label="item.name"
            :name="item.name"
          ></u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item prop="homestyle" borderBottom>
        <view class="title">家庭状况：</view>
        <u-radio-group v-model="form.homestyle" placement="column">
          <u-radio
            :customStyle="{ marginBottom: '40rpx' }"
            v-for="(item, index) in familyTypeList"
            :key="index"
            :label="item.name"
            :name="item.name"
          ></u-radio>
        </u-radio-group>
      </u-form-item>

      <Sign>1-2.家庭人口相关信息</Sign>
      <view class="tabs-container">
        <u-tabs :list="tabList" @click="selectTabItem" :scrollable="true" :current="activeTabIndex"></u-tabs>
        <swiper class="swiper" :current="activeTabIndex" @change="swiperChange">
          <template v-for="(item, index) in form.family">
            <swiper-item :key="item.id" v-if="index <= familySize - 1">
              <scroll-view class="swiper-content" scroll-y>
                <u-form-item prop="family.age" borderBottom>
                  <view class="title">年龄：</view>
                  <u-radio-group v-model="form.family[index].age" placement="column">
                    <u-radio
                      :customStyle="{ marginBottom: '40rpx' }"
                      v-for="item2 in info_two_list[0].age_list"
                      :key="item2.name"
                      :label="item2.name"
                      :name="item2.name"
                    ></u-radio>
                  </u-radio-group>
                </u-form-item>
                <u-form-item prop="family.sex" label="性别：" borderBottom label-width="60">
                  <u-radio-group v-model="form.family[index].sex">
                    <u-radio
                      :customStyle="{ marginRight: '40rpx' }"
                      v-for="item2 in info_two_list[1].gender_list"
                      :key="item2.name"
                      :label="item2.name"
                      :name="item2.name"
                    ></u-radio>
                  </u-radio-group>
                </u-form-item>
                <u-form-item prop="family.employment" borderBottom>
                  <view class="title">劳动力就业：</view>
                  <u-radio-group v-model="form.family[index].employment" placement="column">
                    <u-radio
                      :customStyle="{ marginBottom: '40rpx' }"
                      v-for="item2 in info_two_list[5].job_list"
                      :key="item2.name"
                      :label="item2.name"
                      :name="item2.name"
                    ></u-radio>
                  </u-radio-group>
                </u-form-item>
                <u-form-item prop="family.education" borderBottom>
                  <view class="title">受教育程度：</view>
                  <u-radio-group v-model="form.family[index].education" placement="column">
                    <u-radio
                      :customStyle="{ marginBottom: '40rpx' }"
                      v-for="item2 in info_two_list[6].education_list"
                      :key="item2.name"
                      :label="item2.name"
                      :name="item2.name"
                    ></u-radio>
                  </u-radio-group>
                </u-form-item>
                <u-form-item prop="family.chronic_disease" borderBottom>
                  <view class="title">慢性疾病：</view>
                  <u-checkbox-group v-model="form.family[index].chronic_disease" placement="column">
                    <u-checkbox
                      :customStyle="{ marginBottom: '40rpx' }"
                      v-for="item2 in info_two_list[2].chronic_disease_list"
                      :key="item2.name"
                      :label="item2.name"
                      :name="item2.name"
                    ></u-checkbox>
                  </u-checkbox-group>
                </u-form-item>
                <u-form-item prop="family.major_disease" borderBottom>
                  <view class="title">重大疾病：</view>
                  <u-checkbox-group v-model="form.family[index].major_disease" placement="column">
                    <u-checkbox
                      :customStyle="{ marginBottom: '40rpx' }"
                      v-for="item2 in info_two_list[3].major_disease_list"
                      :key="item2.name"
                      :label="item2.name"
                      :name="item2.name"
                    ></u-checkbox>
                  </u-checkbox-group>
                </u-form-item>
                <u-form-item prop="family.disabled" borderBottom>
                  <view class="title">残疾：</view>
                  <u-checkbox-group v-model="form.family[index].disabled" placement="column">
                    <u-checkbox
                      :customStyle="{ marginBottom: '40rpx' }"
                      v-for="item2 in info_two_list[4].disabled_list"
                      :key="item2.name"
                      :label="item2.name"
                      :name="item2.name"
                    ></u-checkbox>
                  </u-checkbox-group>
                </u-form-item>
              </scroll-view>
            </swiper-item>
          </template>
        </swiper>
      </view>

      <Sign>1-3.家庭共同生活成员特殊信息</Sign>
      <u-form-item prop="bad_behavior" borderBottom>
        <view class="title">1.共同生活成员中是否存在因赌博、吸毒或其他违反国家法律法规拒不改正现象？</view>
        <u-radio-group v-model="form.bad_behavior" placement="column">
          <u-radio
            :customStyle="{ marginBottom: '40rpx' }"
            v-for="(item, index) in badBehaviorList"
            :key="index"
            :label="item.name"
            :name="item.name"
          ></u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item prop="exit" borderBottom>
        <view class="title">2.共同生活成员中是否有出境经历？</view>
        <u-radio-group v-model="form.exit" placement="column">
          <u-radio
            :customStyle="{ marginBottom: '40rpx' }"
            v-for="(item, index) in exitList"
            :key="index"
            :label="item.name"
            :name="item.name"
          ></u-radio>
        </u-radio-group>
      </u-form-item>

      <u-form-item prop="user_nation" label="出境缘由：" borderBottom label-width="100">
        <u-input v-model="form.exit_reason" border="none" placeholder="没有请填无"></u-input>
      </u-form-item>
      <u-form-item prop="user_nation" label="出境目的地：" borderBottom label-width="100">
        <u-input v-model="form.exit_destination" border="none" placeholder="没有请填无"></u-input>
      </u-form-item>
    </u-form>
  </view>
</template>

<script>
export default {
  props: {},
  data: () => ({
    form: {
      name: "",
      idCard: "",
      phoneNumber: "",
      user_age: "",
      user_sex: "男",
      user_nation: "汉",
      if_marriage: "已婚",
      education_level: "小学及以下",
      total_people_num: "5",
      homestyle: "低保家庭",
      family: [
        {
          id: "01",
          age: "16岁以下",
          sex: "男",
          // healthy: "",
          employment: "农业生产",
          education: "文盲",
          chronic_disease: [],
          major_disease: [],
          disabled: [],
        },
        {
          id: "02",
          age: "16岁以下",
          sex: "男",
          // healthy: "",
          employment: "农业生产",
          education: "文盲",
          chronic_disease: [],
          major_disease: [],
          disabled: [],
        },
        {
          id: "03",
          age: "16岁以下",
          sex: "男",
          // healthy: "",
          employment: "农业生产",
          education: "文盲",
          chronic_disease: [],
          major_disease: [],
          disabled: [],
        },
        {
          id: "04",
          age: "16岁以下",
          sex: "男",
          // healthy: "",
          employment: "农业生产",
          education: "文盲",
          chronic_disease: [],
          major_disease: [],
          disabled: [],
        },
        {
          id: "05",
          age: "16岁以下",
          sex: "男",
          // healthy: "",
          employment: "农业生产",
          education: "文盲",
          chronic_disease: [],
          major_disease: [],
          disabled: [],
        },
        {
          id: "06",
          age: "16岁以下",
          sex: "男",
          // healthy: "",
          employment: "农业生产",
          education: "文盲",
          chronic_disease: [],
          major_disease: [],
          disabled: [],
        },
        {
          id: "07",
          age: "16岁以下",
          sex: "男",
          // healthy: "",
          employment: "农业生产",
          education: "文盲",
          chronic_disease: [],
          major_disease: [],
          disabled: [],
        },
        {
          id: "08",
          age: "16岁以下",
          sex: "男",
          // healthy: "",
          employment: "农业生产",
          education: "文盲",
          chronic_disease: [],
          major_disease: [],
          disabled: [],
        },
        {
          id: "09",
          age: "16岁以下",
          sex: "男",
          // healthy: "",
          employment: "农业生产",
          education: "文盲",
          chronic_disease: [],
          major_disease: [],
          disabled: [],
        },
        {
          id: "10",
          age: "16岁以下",
          sex: "男",
          // healthy: "",
          employment: "农业生产",
          education: "文盲",
          chronic_disease: [],
          major_disease: [],
          disabled: [],
        },
      ],
      bad_behavior: "没有",
      exit: "没有",
      exit_reason: "无", //新增 出境缘由
      exit_destination: "无", //新增 出境目的地
    },

    rules: {},
    genderList: [{ name: "男" }, { name: "女" }],
    educationList: [{ name: "小学及以下" }, { name: "初中" }, { name: "中职或高中" }, { name: "专科或本科及以上" }],
    marriageList: [{ name: "已婚" }, { name: "未婚" }, { name: "丧偶" }, { name: "离婚" }],
    familyTypeList: [
      { name: "低保家庭" },
      { name: "特困家庭" },
      { name: "低保边缘家庭" },
      { name: "支出型困难家庭" },
      { name: "正常" },
    ],

    info_two_list: [
      {
        age_list: [{ name: "16岁以下" }, { name: "17~18" }, { name: "19~60" }, { name: "60岁以上" }],
        age_value: "16岁以下",
      },
      {
        gender_list: [{ name: "男" }, { name: "女" }],
        gender_value: "男",
      },
      {
        chronic_disease_list: [
          { name: "高血压" },
          { name: "支气管炎" },
          { name: "肺气肿" },
          { name: "骨质疏松" },
          { name: "其他" },
        ],
        chronic_disease_value: "无",
      },
      {
        major_disease_list: [
          { name: "肝癌" },
          { name: "肺癌" },
          { name: "食道癌" },
          { name: "白血病" },
          { name: "心脏病" },
          { name: "其他" },
        ],
        major_disease_value: "无",
      },
      {
        disabled_list: [
          { name: "智力" },
          { name: "精神" },
          { name: "肢体" },
          { name: "视力" },
          { name: "听力" },
          { name: "言语" },
        ],
        disabled_value: "无",
      },
      {
        job_list: [{ name: "农业生产" }, { name: "务工" }, { name: "休业" }, { name: "待业" }],
        job_value: "农业生产",
      },
      {
        education_list: [
          { name: "文盲" },
          { name: "学龄前" },
          { name: "小学" },
          { name: "初中" },
          { name: "高中" },
          { name: "大专及以上" },
        ],
        education_value: "文盲",
      },
    ],

    badBehaviorList: [{ name: "没有" }, { name: "有" }],
    exitList: [{ name: "没有" }, { name: "有" }],

    tabList: [{ name: "成员1" }, { name: "成员2" }, { name: "成员3" }, { name: "成员4" }, { name: "成员5" }],
    activeTabIndex: 0,
    familySize: 5,
  }),
  computed: {},
  methods: {
    formInit() {
      this.changeFamilySize(this.form.total_people_num)
    },

    selectTabItem(detail) {
      this.activeTabIndex = detail.index
    },

    swiperChange(e) {
      const { current } = e.detail
      this.activeTabIndex = current
    },

    changeFamilySize(value) {
      value = Number(value)
      if (value <= 0 || value > 10) {
        this.familySize = 1
        this.form.total_people_num = "1"
        value = 1
      } else {
        this.familySize = value
      }
      this.activeTabIndex = 0

      this.tabList = []
      for (let i = 0; i < value; i++) {
        this.tabList.push({ name: `成员${i + 1}` })
      }
    },
  },
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted() {
    // this.formInit()
  },
}
</script>

<style lang="scss" scoped>
.form-container {
  box-sizing: border-box;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 20rpx;

  .title {
    font-size: 32rpx;
    color: $uni-color-paragraph;
    font-weight: bold;
    margin-bottom: 40rpx;
  }

  .tabs-container {
    height: 800rpx;
    display: flex;
    flex-direction: column;
    .swiper {
      flex: 1;
      box-sizing: border-box;
      margin-top: 20rpx;

      .swiper-content {
        box-sizing: border-box;
        height: 100%;
        padding: 20rpx;
        background-color: #f6f6f6;
      }
    }
  }
}
</style>
